<!--
  *@Description : 发布日常组件
  *@author 萧红
  *@date 2020-03-15 23:27
  *@LastEditTime 2020-03-15 23:27
  *@LastEdititors
-->
<template>
    <div id="addRiChang">
      <add-top :title="'发图文'" @commit="add"></add-top>
      <div class='main' :style="{height: $inerHeight+50-30+'px'}">
        <cube-scroll :data="[]" ref="scroll" :style="{height:$inerHeight + 55 - 35+'px'}">
          <cube-textarea class="content" v-model="content" :maxlength="60" :placeholder="'           每一个不cos的日子，都是对生活的不尊重   '"></cube-textarea>
          <div class="display-guangchang">
            <cube-checkbox v-model="isShowInGuangChang">
              动态显示在广场
            </cube-checkbox>
          </div>
          <div class="upload">
            <!--action="http://112.126.100.206/uploadFile"-->
            <!--action="http://localhost/uploadFile"-->
            <cube-upload
              ref="upload"
              action="http://112.126.100.206/uploadFile"
              :simultaneous-uploads="4"
              @files-added="filesAdded"
              :max = "9"
            />
            <!--<input type="file" class="file" ref="upload" multiple @change="handleGetFile">-->
          </div>
        </cube-scroll>
        <add-bottom></add-bottom>
      </div>
    </div>
</template>

<script>
import AddTop from '../../components/AddTop'
import AddBottom from '../../components/AddBottom'
export default
{
  name: 'addRiChang',
  components: {
    AddTop,
    AddBottom
  },
  mounted () {
    this.$refs.scroll.refresh()
  },
  data () {
    return {
      content: '',
      isShowInGuangChang: true, // 是否勾选显示到广场,默认显示
      files: [] // 选择的图片文件数组
    }
  },
  methods: {
    // handleGetFile () {
    // 通过表单时的方法
    //   this.files = event.target.files
    //   console.log(this.files)
    // },
    add: function () {
      this.files = this.$refs.upload.files
      if (this.content !== '' || this.files.length > 0) {
        this.$toast('正在发布', 'loading', 30000)
        let formData = new FormData()
        // 将图片文件分别放入formData对象
        for (let i = 0; i < this.files.length; i++) {
          formData.append('file[]', this.files[i].file)
        }
        let userid = localStorage.getItem('userId')
        formData.append('userId', userid)
        formData.append('content', this.content)
        formData.append('showGuangChang', this.isShowInGuangChang)
        formData.append('add', 'true')
        formData.append('type', 'img')
        let url = '/uploadFile'
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // console.log(this.files)
        this.$post(url, formData, config).then((res) => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct', 500)
            setTimeout(() => {
              this.toNewPage('/home')
            }, 500)
          } else {
            this.$toast(res.msg, 'warn', 1000)
          }
        })
      } else {
        this.$toast('分享点什么吧', 'warn')
        return false
      }
    },
    filesAdded (files) {
      console.log(files)
      // 只能上传图片格式jpeg，png，jpg
      let hasIgnore = false
      // 允许上传的文件格式
      let formart = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      const maxSize = 2 * 1024 * 1024 // 2M
      // const maxSize = 2 * 1024 * 10240000 // 1M
      for (let k in files) {
        const file = files[k]
        if (typeof file === 'object') {
          if (!formart.includes(file.type)) {
            file.ignore = true
            this.$toast('上传的不是图片文件(jpg,jpeg,png,gif)', 'warn', 1000)
            return false
          } else if (file.size > maxSize) {
            this.$toast('单张图片不能超过2M', 'warn', 1000)
            file.ignore = true
            hasIgnore = true
          }
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: 'You selected >1M files'
      }).show()
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#addRiChang
{
  position relative
  .main
  {
    position relative
    .content
    {
      height: 51px
    }
    .display-guangchang
    {
      width 100%;
      position absolute
      top:50px
      padding 5px 0px
      border-bottom 1px solid #f0f0f0
    }
    .upload
    {
      width: 100%;
      display flex
      flex-flow row wrap
      justify-content flex-start
      position absolute
      top:80px
      & > div
      {
        margin 0px 1%
        i
        {font-size:35px}
      }
    }
    .bottom
    {
      width: 100%
      position absolute
      height: 15px
      line-height 15px
      bottom 0
      display flex
      justify-content flex-start
      span
      {
        padding 0px 2px
        margin 0px 2px
      }
    }
  }
}
</style>
